<template>
	<view class="contents">
		<view class="vtabs">
			<van-tabs :active="active" @change="onChange" color="#289958">
				<van-tab title="全部"></van-tab>
				<van-tab title="待付款"></van-tab>
				<van-tab title="待发货"></van-tab>
				<van-tab title="待收货"></van-tab>
				<van-tab title="待评价"></van-tab>
				<!-- <van-tab title="已完成"></van-tab> -->
			</van-tabs>
		</view>
		<view style="height: 80rpx;"></view>
		<view class="oredr_list" v-for="(item, index) in orderList" :key="index" @click="orderDetail(item.order_id, item._status._type)">
			<view class="order_head">
				<view class="order">订单编号：{{ item.order_id }}</view>
				<view class="status">{{ item._status._title }}</view>
			</view>

			<view class="" style="margin-bottom: 25rpx;" v-for="(i, inx) in item.cartInfo" :key="inx">
				<view class="order_content" >
					<view class="order_img"><image :src="i.productInfo.image" mode=""></image></view>
					<view class="order_text">
						<view class="order_title">{{ i.productInfo.store_name }}</view>
						<view class="order_detail">{{ i.is_spec == 0 ? i.productInfo.store_info : i.spec.sku }}</view>
						<view class="order_tab"><view class="tab_list" v-for="(item, index) in 3" :key="index">礼物</view></view>
						<view class="order_price">
							<view class="new_price">￥{{ i.is_spec == 0 ? i.productInfo.price : i.spec.price }}</view>
							<view class="old_price">￥{{ i.productInfo.ot_price }}</view>
						</view>
					</view>
				</view>

				<view class="fengexian"></view>
				<view class="order_time">
					<view>下单时间：{{ item.add_time }}</view>
					<view>
						{{item._status._type==0?'待付款':'实付款'}}:
						<span>{{item.group_id != 6 ? '￥'+(parseFloat(i.truePrice) + parseFloat(item.total_postage)):i.productInfo.expend_integral+'积分' }}</span>
					</view>
				</view>
			</view>
				<view class="order_bottom">
					<view class="cancel" v-if="item._status._type == 2" @click.stop="checkLogistics(item.order_id)">查看物流</view>
					<view class="cancel" v-if="item._status._type == 0" @click.stop="closeOrder(item.order_id)">取消订单</view>
					<view class="payment" v-if="item.group_id != 6 && item._status._type != -2">
						{{ item._status._type == 0 ? '立即支付' : item._status._type == 1 ? '申请退款' : item._status._type == 2 ? '确认收货' : '晒单评价' }}
					</view>

					<view class="payment" v-if="item.group_id == '6'" :class="item._status._type == 1 ? 'taoming' : ''">
						{{ item._status._type == 0 ? '立即支付' : item._status._type == 1 ? '' : item._status._type == 2 ? '确认收货' : '晒单评价' }}
					</view>
				</view>
				
				
				
				
	
			
		</view>

		<view class="fooder" style="height: 100rpx;" v-if="orderList.length == 0"><view class="">暂无相关订单数据</view></view>
	</view>
</template>

<script>
import { myOrder,closeOrder } from '@/api/api.js';
export default {
	data() {
		return {
			active: 0,
			orderList: [],
			page: 1,
			type: 9, //选择类型的type
			total: '' //总商品数
		};
	},
	onLoad(options) {
		this.active = parseInt(options.index);
		if (this.active == 0) {
			this.type = 9;
		} else if (this.active == 1) {
			this.type = 0;
		} else if (this.active == 2) {
			this.type = 1;
		} else if (this.active == 3) {
			this.type = 2;
		} else if (this.active == 4) {
			this.type = 3;
		} else {
			this.type = 4;
		}
		this.init(this.page, this.type);
	},
	onShow() {},
	onReachBottom() {
		if (this.total == this.orderList.length) {
			return;
		}
		this.page = this.page + 1;
		uni.showLoading({
			title: '加载中'
		});
		let time = setTimeout(() => {
			let data = `first=${this.page}&limit=${10}&type=${this.type}`;
			myOrder(data).then(res => {
				if (res.data.code == '200') {
					uni.hideLoading();
					this.orderList.push(...res.data.data.list);
					this.total = res.data.data.total;
				} else {
				}
			});
			clearTimeout(time);
		}, 1500);
	},
	methods: {
		// 取消订单
		closeOrder(id){
			let data = `uni=${id}`
			closeOrder(data).then(res=>{
				if(res.data.code == '200'){
					uni.showToast({
						title:'取消订单成功',
						duration:1000
					})
					let times = setTimeout(()=>{
						uni.navigateBack()
					},900)
				}else {
					uni.showToast({
						title:res.data.msg,
						duration:1000
					})
				}
			})
		},
		init(page, type) {
			if (page == undefined) {
				page = 1;
			}
			if (type == undefined) {
				type = 9;
			}
			let data = `first=${page}&limit=${10}&type=${type}`;
			myOrder(data).then(res => {
				if (res.data.code == '200') {
					this.orderList = res.data.data.list;
					this.total = res.data.data.total;
				} else {
				}
			});
		},
		onChange(e) {
			this.page = 1;
			this.active = e.detail.index;
			if (this.active == 0) {
				this.type = 9;
			} else if (this.active == 1) {
				this.type = 0;
			} else if (this.active == 2) {
				this.type = 1;
			} else if (this.active == 3) {
				this.type = 2;
			} else if (this.active == 4) {
				this.type = 3;
			} else {
				this.type = 4;
			}
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			this.total = 0;
			this.init(1, this.type);
		},
		// 订单详情
		orderDetail(id, type) {
			if (type == 3) {
				uni.navigateTo({
					url: '/page_home/shoppingpinjia/shoppingpinjia?orderId=' + id
				});
			}
			uni.navigateTo({
				url: '/page_shoppingcart/orderdetail/orderdetail?orderId=' + id
			});
		},
		// 查看物流
		checkLogistics(id) {
			uni.navigateTo({
				url: '/myIndex/logisticsInformation/logisticsInformation?id=' + id
			});
		}
	}
};
</script>

<style lang="scss">
.contents {
	width: 100%;
	min-height: 100vh;
	background-color: rgb(247, 249, 252);

	.vtabs {
		width: 100%;
		height: auto;
		position: fixed;
		top: 0;
		left: 0;
	}

	.oredr_list {
		width: 694rpx;
		// height: 506rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin: 35rpx auto 0;
		padding: 20rpx 0;

		.order_head {
			box-sizing: border-box;
			padding: 0 28rpx;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;

			.order {
				color: #999999;
			}

			.status {
				color: #d41312;
			}
		}

		.order_content {
			box-sizing: border-box;
			padding: 0 28rpx;
			width: 100%;
			height: 182rpx;
			display: flex;
			margin-bottom: 20rpx;

			.order_img {
				width: 182rpx;
				height: 182rpx;
				flex-shrink: 0;

				image {
					border-radius: 8rpx;
					width: 100%;
					height: 100%;
				}
			}

			.order_text {
				margin-left: 30rpx;
				width: 470rpx;

				.order_title {
					width: 450rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 30rpx;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					-o-text-overflow: ellipsis;
				}

				.order_detail {
					margin-top: 10rpx;
					width: 440rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 26rpx;
					color: #999999;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				.order_tab {
					margin-top: 15rpx;
					width: 100%;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 26rpx;
					display: flex;

					.tab_list {
						width: 56rpx;
						height: 32rpx;
						background-color: rgb(235, 249, 242);
						color: #36c67d;
						font-size: 20rpx;
						text-align: center;
						line-height: 32rpx;
						margin-right: 20rpx;
					}
				}

				.order_price {
					margin-top: 10rpx;
					width: 100%;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 26rpx;
					display: flex;

					.new_price {
						color: #3db963;
						font-size: 24rpx;
					}

					.old_price {
						color: #999999;
						font-size: 22rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.fengexian {
			width: 640rpx;
			border: 1rpx solid #eeeeee;
			margin: 30rpx auto 0;
		}

		.order_time {
			box-sizing: border-box;
			padding: 0 28rpx;
			width: 100%;
			height: 30rpx;
			line-height: 30rpx;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			margin-top: 20rpx;
			color: #999999;
			font-size: 26rpx;

			span {
				color: #3db963;
			}
		}

		.order_bottom {
			// width: 100%;
			display: flex;
			justify-content: flex-end;
			margin-top: 25rpx;
			padding: 0 20rpx;

			.cancel {
				width: 162rpx;
				height: 46rpx;
				border: 1rpx solid #3db963;
				border-radius: 34rpx;
				color: #3db963;
				font-size: 24rpx;
				text-align: center;
				line-height: 46rpx;
				margin-left: 300rpx;
				// opacity: 0;
			}

			.payment {
				width: 162rpx;
				height: 52rpx;
				border-radius: 34rpx;
				color: #ffffff;
				font-size: 24rpx;
				text-align: center;
				line-height: 52rpx;
				background-color: #1db475;
				margin-left: 30rpx;
			}
		}
	}
}

.fooder {
	display: flex;
	justify-content: center;
	line-height: 100rpx;
	color: #ccc;
}
.taoming {
	opacity: 0;
	background-color: transparent !important;
}
</style>
